<template>
    <div>
      <div class="goods" style="padding:10px;">
        <div class="goods-left">
          <div class="goods-img">
            <img :src="config1.fileUrl+detail.imgList[0].img_url" style="height:100%;width:100%;">
          </div>
          <div class="goods-text">
            <h5>￥ <span style="font-size: 1.3rem;">{{norm.price*num}}</span></h5>
            <p>{{isChose>=0?'已选规格：':''}}{{norm.norm}}</p>
          </div>
        </div>
        <div class="goods-right">
          <icon type="cancel" style="color: #a1a1a1" @click.native="clickHide"></icon>
        </div>
      </div>
      <!--规格-->
      <div class="specification" style="padding:10px;">
        <p>规格</p>
        <div class="spec">
          <span class="spec-item" :class="isChose==index?'active':''" v-for="(item,index) in norms" @click="choseNorm(item,index)">{{item.norm}} {{item.price}}元</span>
        </div>
      </div>
      <group gutter="0" @group-title-margin-top="0" style="padding:10px;">
        <x-number title="购买数量" v-model="num" button-style="round" :min="0" style="padding-left: 0;font-size: 0.8rem;"></x-number>
      </group>
      <tabbar style="padding: 0;position: fixed;">
        <div style="width:85%;margin:0 auto;padding:5px 0;text-align: center;font-size: 0;">
          <span class="add" @click="addShopping">加入购物车</span>
          <span class="mai" @click="buyNow">立即购买</span>
        </div>
      </tabbar>
      <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask :text="toastMsg" :position="position"></toast>
    </div>
</template>

<script>
  import { Icon, Group, XNumber, Tabbar } from 'vux'
    export default {
      name: "",
      props:['detail'],
      components: {
        Icon, Group, XNumber, Tabbar
      },
      data () {
        return {
          price:'0.00',
          norms:[],
          norm:{
            norm:'请选择规格',
            unit:'',
            price:'0.00'
          },
          isChose:-1,
          num:0,

          showPositionValue: false, // Toast提示
          position: 'default',
          toastMsg: '',
        }
      },
      created(){
        this.norms = JSON.parse(this.detail.norms)
      },
      methods:{
        addGoods(){
          let arr = [];
          let obj={
            goodsId:this.detail.id,
            norms:this.norm,
            goodsName:this.detail.goods_name,
            num:this.num,
            price: this.norm.price*this.num,
            supplyId: this.detail.supply_id,
          }
          arr.push(obj)
          return arr
        },
        // 加入购物车
        addShopping(){
          this.$vux.loading.show({
            text: 'Loading'
          });
          if(this.isChose<0){
            this.msg('请选择规格');
            this.$vux.loading.hide();
            return;
          }
          if(this.num<=0){
            this.msg('请选择购买数量');
            this.$vux.loading.hide();
            return;
          }
          let arr = this.addGoods()
          console.log(arr)
          this.config1.post('/purchasers/app/shoppingCart/addToCart', {jsonStr:JSON.stringify(arr)}).then(res=>{
            if(res.data.code==0){
              this.$vux.loading.hide();
              this.msg(res.data.message);
              // setTimeout(()=>{
              //   this.$emit('isShowGui',false)
              // },200)
            }else{
              this.$vux.loading.hide();
              this.msg(res.data.message);
            }
          }).catch(err=>{
            this.$vux.loading.hide();
            this.msg('网络错误');
          })
        },
        // 选择规格
        choseNorm(norm,index){
          this.isChose = this.isChose==index?-1:index
          this.norm.norm = this.isChose==index?norm.norm:'请选择规格'
          this.norm.price = this.isChose==index?norm.price:'0.00'
          this.norm.unit = this.isChose==index?norm.unit:''

          this.num = 0;
        },
        // 立即购买
        buyNow(){
          let obj=[{
            supply_id: this.detail.supply_id,
            is_open_invoice: '0', // 是否开具发票
            remark: '', // 订单备注
            shoppingCartList: [
              {
                goods_id:this.detail.id,
                goods_name:this.detail.goods_name,
                img_url: this.detail.imgList[0].img_url,
                supply_id:this.detail.supply_id,
                norms:this.norm,
                price: this.norm.price,
                num:this.num,
                cartId: '',
                remark: '',
              }
            ]
          }];
          this.$router.push({path: '/project1/view2/make-order', query: {order: JSON.stringify(obj)}});
        },
        // 关闭
        clickHide(){
          this.$emit('isShowGui',false)
        },
        // 信息提示
        msg(str){
          this.showPositionValue = true;
          this.position = 'middle';
          this.toastMsg = (str);
        },
      },
    }
</script>

<style scoped lang="less">
  .spec-item.active{
    background: #33bb99;
    color: #fff;
  }
.goods-left{
  width: 90%;
  float: left;
  height:160px;
}
.goods-img{
  height:125px;
  width:125px;
  border-radius: 4px;
  overflow: hidden;
  float: left;
}
.goods-text{
  float: left;
  width:50%;
  h5{
    color:#e54900;
    line-height:60px;
    padding-left:20px;
    padding-top:20px;
  }
  p{
    color:#4f5352;
    line-height:30px;
    padding-left:20px;
    font-size:0.8rem;
  }
}
.goods-right{
  width: 10%;
  float: right;
}
  .specification{
    clear: both;
    font-size: 0.8rem;
    padding-bottom:20px;
    /*border-bottom:1px solid #f4f4f4;*/
  }
  .spec{
    margin-top:20px;
  }
  .spec-item{
    background: #faf6f7;
    line-height:25px;
    padding: 0 10px;
    display: inline-block;
    border-radius: 5px;
    margin-right:10px;
  }
  .add,.mai{
    display: inline-block;
    line-height:35px;
    font-size: 1rem;
    color:#fff;
    width:50%;
  }
  .add{
    background: #ffc655;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }
  .mai{
    background: #33bb99;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }
</style>
